<template>
  <div class="policy-page w">
        <el-card class="box-card" shadow="hover">
          <template #header>
            <el-page-header>
              <template #title>
                <el-text size="large" tag="b">Policies</el-text>
              </template>
              <template #content>
                <el-text size="large" type="primary" tag="b">Shipping Countries</el-text>
              </template>
            </el-page-header>
          </template>
          
          <el-scrollbar height="calc(100vh - 280px)">
            <el-space direction="vertical" alignment="stretch" style="width: 100%">
              <div class="policy-section">
                <h2>1. Available Regions</h2>
                <el-text class="policy-text">
                  We currently ship to most countries in North America, Europe, Asia Pacific, and select regions in other continents. Shipping availability may vary based on product type and local regulations.
                </el-text>
              </div>

              <div class="policy-section">
                <h2>2. Shipping Methods by Region</h2>
                <el-text class="policy-text">
                  Different shipping methods and carriers are available depending on your location. Express shipping may not be available in all regions. Please check the available shipping methods during checkout.
                </el-text>
              </div>

              <div class="policy-section">
                <h2>3. Customs & Import Duties</h2>
                <el-text class="policy-text">
                  International orders may be subject to customs duties and taxes imposed by the destination country. These charges are the responsibility of the recipient and are not included in our shipping fees.
                </el-text>
              </div>

              <el-divider>Shipping Zones</el-divider>

              <el-tabs type="border-card">
                <el-tab-pane label="North America">
                  <el-descriptions :column="2" border>
                    <el-descriptions-item label="United States">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Canada">Available - 5-7 business days</el-descriptions-item>
                    <el-descriptions-item label="Mexico">Available - 5-7 business days</el-descriptions-item>
                    <el-descriptions-item label="Costa Rica">Available - 7-10 business days</el-descriptions-item>
                    <el-descriptions-item label="Panama">Available - 7-10 business days</el-descriptions-item>
                  </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="Europe">
                  <el-descriptions :column="2" border>
                    <el-descriptions-item label="United Kingdom">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Germany">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="France">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Italy">Available - 4-6 business days</el-descriptions-item>
                    <el-descriptions-item label="Spain">Available - 4-6 business days</el-descriptions-item>
                    <el-descriptions-item label="Netherlands">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Belgium">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Switzerland">Available - 4-6 business days</el-descriptions-item>
                  </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="Asia Pacific">
                  <el-descriptions :column="2" border>
                    <el-descriptions-item label="Japan">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="South Korea">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Australia">Available - 5-7 business days</el-descriptions-item>
                    <el-descriptions-item label="New Zealand">Available - 5-7 business days</el-descriptions-item>
                    <el-descriptions-item label="Singapore">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Hong Kong">Available - 3-5 business days</el-descriptions-item>
                    <el-descriptions-item label="Taiwan">Available - 3-5 business days</el-descriptions-item>
                  </el-descriptions>
                </el-tab-pane>
              </el-tabs>

              <el-alert
                title="Shipping Restrictions"
                type="warning"
                :closable="false"
                show-icon
              >
                <el-text class="mx-1">Some products may have additional shipping restrictions</el-text>
              </el-alert>
            </el-space>
          </el-scrollbar>
        </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-text {
  line-height: 1.8;
  display: block;
  margin: 10px 0;
}

.policy-section {
  margin: 20px 0;
}

.policy-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--el-text-color-primary);
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}

:deep(.el-descriptions__cell) {
  padding: 12px 20px !important;
}
</style> 